<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>应用管理</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta name="viewport" content="width=device-width, user-scalable=no">
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta name=”apple-mobile-web-app-status-bar-style” content=”default” />
		<meta name=”apple-mobile-web-app-status-bar-style” content=”black” />
		<meta name=”apple-mobile-web-app-status-bar-style” content=”black-translucent” />
		<meta content="telephone=no" name="format-detection">
		<meta content="email=no" name="format-detection">
		<meta name="format-detection" content="telephone=no"/>
		<link rel="stylesheet" type="text/css" href="${s.base}/lib/layui/css/layui.css"/>
		<link href="${s.base}/pc/css/swiper.min.css" rel="stylesheet">
		<link href="${s.base}/pc/css/weWeb.css" rel="stylesheet" />
	</head>
	<style type="text/css">
		body,html{background:#f5f5f5;}
	</style>
	<body>
		<#if showGuide == true>
		<div class="tc"></div>
		</#if>
		<div style="background:#fff;">
			<div class="w1200 we-head clearfix">
				<div class="we-head-logo"><img src="/sysFile/showFileByPath?path=${websiteConfiguration.logoPath}"></div>
				<div class="we-head-nav">
					<ul>
						<li onclick="goFistPage()">首页</li>
						<li onclick="goCaseListPage()">案例</li>
						<li class="checked" onclick="goProductListPage()">应用中心</li>
						<li onclick="goAboutUsPage()">关于我们</li>
						<#if sysUser?? >
						<li onclick="goMyIndexPage()">控制中心</li>
						</#if>
					</ul>
				</div>
				<#if sysUser?? >
				<div class="we-head-logined">
					<div class="user-updown ellipsis"><i class="cytfonts">&#xe6a2;</i></div>
					<div class="user-name ellipsis">${sysUser.name}</div>
					<div class="user-Avatar"><img src="/sysFile/showFileByObjectId?objectId=${sysUser.headLogo}"></div>
					<div class="user-txt-list" style="display:none;">
						<ul>
							<li>个人中心</li>
							<li>退出</li>
						</ul>
					</div>
				</div>
				<#else>
				<div class="we-head-loginbtn">
					<span><a href="/login">登录</a></span>
				</div>
			</#if>
			</div>
		</div>
		<div class="content-15 mart15">
			<div class="thrbar">
				<ul>
					<li><h1>功能选购</h1><h2>多功能模块自由组合</h2></li>
					<li><h1>入驻微信应用</h1><h2>无需账号无需制作</h2></li>
					<li><h1>私人定制</h1><h2>定制专属的应用功能</h2></li>
				</ul>
			</div>
		</div>
		<div class="content-15 mart15">
			<div class="select-kind apply-use-category">
				<div class="kind-label">全部行业</div>
				<span class="checked">全部</span>
				<#list categoryList as category>
					<span data-id="${category.id}" >${category.name}</span>
				</#list>
			</div>
			<div class="select-kind apply-use-type">
				<div class="kind-label">类型</div>
				<span class="checked">全部</span>
				<#list sysDictContentList as sysDictContent>
					<span data-id="${sysDictContent.value}" >${sysDictContent.name}</span>
				</#list>
			</div>
			<div class="line"></div>
			<div class="product-list clearfix  guidelines" id="productList">
				<#if showGuide == true>
				<!--步骤一开始-->
				<div class="guid-ctn clearfix">
					<div class="guid-point">
						<div class="guid-point-nei">点击此处，创建你的第一个微信应用。
							<div class="div-button-line">
								<button type="button" class="tgbtn">跳过</button>
								<button type="button" class="nextbtn">下一步</button>
							</div>
						</div>
					</div>
					<div class="guid-point-tep"><img src="${s.base}/pc/images/tep2.png"></div>
				</div>
				<!--步骤一结束-->
				</#if>
				<ul id="caseListShow">
					<#list wxApplyUseList as wxApplyUse>
						<#if wxApplyUse.applyUseStatus!='1'>
					<li>
						<div class="product-pic"><img src="/sysFile/showFileByObjectId?objectId=${wxApplyUse.coverImage}"></div>
						<h1>${wxApplyUse.name}</h1>
						<h2>版本：${wxApplyUse.version}<div class="div-view"><i class="cytfonts">&#xe646;</i>${wxApplyUse.clicks}</div></h2>
						<div class="pro-hover" style="display:none;">
							<div class="circle-pro-pic" style="background: url(/sysFile/showFileByObjectId?objectId=${wxApplyUse.coverImage}) center no-repeat; background-size:cover;"></div>
							<h1>${wxApplyUse.name}</h1>
							<div class="pro-view-btn" onclick="goProductDetailPage('${wxApplyUse.id}')">查看应用</div>
						</div>
					</li>
						</#if>
					</#list>
				</ul>
			</div>
		</div>

	<div class="we-bot-foot">
		<div class="w1200 clearfix">
			<div class="bot-nav-left clearfix">
				<#list friendlyLinkCodeList as friendlyLinkCode>
				<dl>
					<dt>${friendlyLinkCode.codeName}</dt>
					<#list friendlyLinkCode.friendlyLinkList as friendlyLink>
					<dd>${friendlyLink.name}</dd>
				</#list>
				</dl>
			</#list>
		</div>
		<div class="bot-tel-mid">
			<h1>合作咨询热线</h1>
			<h2>${websiteConfiguration.telephone}</h2>
			<div class="adv-btn">在线咨询</div>
			<div class="adv-pic">
				<img src="${s.base}/pc/images/kf.png">
			</div>
		</div>
		<div class="bot-ewm-rig clearfix">
			<ul>
				<li><div class="ewm"><img src="/sysFile/showFileByPath?path=${websiteConfiguration.followPath}"></div><h1>扫一扫关注我们</h1></li>
				<li><div class="ewm"><img src="/sysFile/showFileByPath?path=${websiteConfiguration.interactPath}"></div><h1>扫一扫一起互动</h1></li>
			</ul>
		</div>
	</div>
	<div class="bot-div-line">地址：${websiteConfiguration.companyAddress}&nbsp;&nbsp;电话：${websiteConfiguration.phone}&nbsp;&nbsp;邮箱：${websiteConfiguration.mailbox}<br>
		${websiteConfiguration.recordNo}
	</div>
	</div>
	</body>
	<script src="${s.base}/lib/layui/layui.js" type="text/javascript" charset="utf-8"></script>
	<script src="${s.base}/pc/js/jquery-2.1.4.min.js" type="text/javascript"></script>
	<script src="${s.base}/pc/js/swiper.min.js" type="text/x-javascript"></script>
	<script src="${s.base}/js/common.js" type="text/javascript" charset="utf-8"></script>
	<script src="${s.base}/pc/js/base.js" type="text/x-javascript"></script>
	<script>
		var categoryId = "";
		var type = "";

        layui.use(['jquery', 'dialog', 'baseutil'], function () {
            var $ = layui.jquery,
                dialog = layui.dialog,
                baseutil = layui.baseutil;

            $('.user-txt-list li').bind('click', function () {
                if ($(this).index() === 0) {
                    window.open('/web/personalEdit', '_self')
                } else if ($(this).index() === 1) {
                    dialog.confirm("确定要退出吗？", function () {
                        baseutil.AjaxGetMark("/webExit", "", function () {
                            window.location.href = "/web/index";
                        });
                    });
                }
            });

            //跳过
            $(".tgbtn").bind("click",function(){
                baseutil.AjaxPostMark("/sys/sysguide/addOrUpdate", {status: '2'}, function () {
                    $(".tc").hide();
                    $(".guidelines").removeClass("guidelines");
                    $(".guid-ctn").remove();
                });
            });

            //下一步
            $(".nextbtn").bind("click",function(){
				window.location.href = "/web/productDetail";
            });
        });

		$(function(){
			$(".we-head-nav ul li").bind("click",function(){
				$(".we-head-nav ul li").removeClass("checked");
				$(this).addClass("checked");
			})

            $(".we-head-logined").mouseover(function(){
                $(".user-txt-list").show();
                $(this).find(".user-updown").addClass("Rotate180")
            });

            $(".we-head-logined").mouseout(function(){
                $(".user-txt-list").hide();
                $(this).find(".user-updown").removeClass("Rotate180")
            });

            $(".apply-use-category span").bind("click",function(){
                $(this).parent(".select-kind").find("span").removeClass("checked");
                $(this).addClass("checked");
				var newCategoryId = $(this).attr("data-id");
                // 查询
                caseShow(newCategoryId,type)
            })

            $(".apply-use-type span").bind("click",function(){
                $(this).parent(".select-kind").find("span").removeClass("checked");
                $(this).addClass("checked");
                var newType = $(this).attr("data-id");
                // 查询
                caseShow(categoryId,newType)
            })

            initProduct();
		})

        function caseShow(newCategoryId,newType) {
            categoryId = newCategoryId;
            type = newType;
            $.get("/web/wxapplyuse/queryWxApplyUseList", {"categoryId":categoryId,"type":type}, function (result) {
                var applyUseList = result.data;
                var str ='';
                if (applyUseList != null && applyUseList.length > 0) {
                    for(var i = 0; i < applyUseList.length; i++) {
                        var applyUse = applyUseList[i];
                        str+='<li>\
                        		<div class="product-pic"><img src="/sysFile/showFileByObjectId?objectId='+applyUse.coverImage+'"></div>\
                            	<h1>'+applyUse.name+'</h1>\
                            	<h2>版本：'+applyUse.version+'<div class="div-view"><i class="cytfonts">&#xe646;</i>'+applyUse.clicks+'</div></h2>\
                        		<div class="pro-hover" style="display:none;">\
                            	<div class="circle-pro-pic" style="background: url(/sysFile/showFileByObjectId?objectId='+applyUse.coverImage+') center no-repeat; background-size:cover;"></div>\
                            	<h1>'+applyUse.name+'</h1>\
                            	<div class="pro-view-btn" onclick="goProductDetailPage(\''+applyUse.id+'\')">查看应用</div>\
                            	</div>\
                            </li>';
                    }
                }
                $("#caseListShow").html(str);
                initProduct();
            });
        }

        function initProduct(){
            $(".product-list ul li").hover(function(){
                $(".product-list ul li").find(".pro-hover").hide();
                $(this).find(".pro-hover").show();
                $(".product-list ul li").removeClass("checked");
                $(this).addClass("checked");
            },function(){
                $(this).removeClass("checked");
                $(this).find(".pro-hover").hide();
            })
		}
	</script>
</html>
